<!-- SpontaneousMomentsDetail_Frame.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>精彩瞬间详情frame</title>
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css">
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<link rel="stylesheet" type="text/css" href="../../css/aui-slide.css"/>
		<style type="text/css">
			p{
				margin: 0;
			}
			.pic-info-div{
				padding: 10px;
			}
			.info-title{
				font-size: 14px;
				color: #666;
			}
			.top-tag{
				padding: 10px;
			}
			.top-tag-content{
				background-color: white;
				border: 1px solid #d9d9d9;
				border-radius: 4px;
				height: 40px;
				position: relative;
			}
			.top-tag-item{
				width: 50%;
				height: 100%;
				position: relative;
			}
			.top-tag-item-left{
				float: left;
				border-right: 1px solid #d9d9d9;
			}
			.top-tag-item-right{
				float: right;
			}
			.item-temp-img{
				width: 24px;
				position: absolute;
				left: 30%;
				top: 6px;
			}
			.item-img{
				width: 24px;
				position: absolute;
				left: 14%;
				top: 6px;
			}
			.item-p{
				text-align: center;
				line-height: 40px;
			}
			.touxiang{
				position: absolute;
				left: 0;
				top: 0;
	            width: 38px;
	            height: 38px;
	            border-radius: 19px;
	        }
	        .nameLabel{
	            margin-left: 46px;
	            font-size: 14px;
	            color: #666;
	        }
	        .contentDiv{
	            margin-left: 46px;
	            margin-top: 5px;
	            font-size: 14px;
	            text-overflow: -o-ellipsis-lastline;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            display: -webkit-box;
	            /*-webkit-line-clamp: 3;*/
	            -webkit-box-orient: vertical;
	            color: #666;
	            word-wrap:break-word;
	        }
	        .timeSpan{
	            /*display: block;*/
	            margin-top: 5px;
	            margin-left: 46px;
	            color: #999;
	            font-size: 12px;
	        }
	        .question_detail{
	        	background-color: white;
	        	padding: 10px;
	        	/*border-bottom: 1px solid #ddd;*/
	        }
	        .answer-div{
	        	position: relative;
	        }
	        .comment-list{
	        	background-color: rgba(0,0,0,0);
	        }
	        .bottom-div{
	        	height: 50px;
	        	padding: 10px;
	        	background-color: rgb(243, 245, 247);
	        	position: fixed;
	        	left: 0;
	        	bottom: 0;
	        	width: 100%;
	        }
	        .bottom-div .bottom-div-content{
	        	background-color: #fff;
	        	border: 1px solid #d9d9d9;
	        	border-radius: 3px;
	        	padding: 4px 10px;
	        }
	        .bottom-div .bottom-div-title{
	        	font-size: 14px;
	        	color: #999;
	        	line-height: 14px;
	        	margin-left: 20px;
	        }
	        .bottom-div .bottom-div-icon{
	        	width: 16px;
	        	position: absolute;
	        	left: 20px;
	        	top: 17px;
	        }
	        .bottom-blank-div{
	        	height: 50px;
	        }
	        .noSign {
			    padding: 40px 0; 
			}
			.loadFailure{
				padding: 40px 0; 
			}
			.aui-slide-wrap .aui-slide-node {
			    background-image: url(../../image/course_placehoder.png);
				background-repeat: no-repeat;
			    background-size: cover;
			    background-position: center;
			}
			.img-cell{
				background-image: url(../../image/course_placehoder.png);
				background-repeat: no-repeat;
			    background-size: cover;
			    background-position: center;
			}
		</style>
	</head>
	<body>
		<div id="aui-slide">
		    <div id="pic_list_view" class="aui-slide-wrap" >
		        <div class="aui-slide-node bg-dark img-cell">
		            <!-- <img src="../../image/course_placehoder.png" /> -->
		        </div>
		    </div>
		    <div class="aui-slide-page-wrap"><!--分页容器--></div>
		</div>
		<div class="pic-info-div">
			<p class="info-title">姓名：<span id="user_name">--</span></p>
			<p class="info-title">班级：<span id="class_name">--</span></p>
			<p class="info-title">上传时间：<span id="submit_time">--</span></p>
			<p class="info-title">拍摄时间：<span id="shooting_time">--</span></p>
			<p class="info-title">照片名称：<span id="photo_name">--</span></p>
		</div>
		<!-- <div class="top-tag">
			<div class="top-tag-content">
				<div class="top-tag-item top-tag-item-left">
					<img class="item-img" src="../../image/icon_course_comment.png">
					<p class="item-p">
						评论（<span id="comment_num">0</span>）
					</p>
				</div>
				<div class="top-tag-item top-tag-item-right">
					<img class="item-img" src="../../image/icon_course_look.png">
					<p class="item-p">
						查看（<span>0</span>）
					</p>
				</div>
			</div>
		</div> -->
		<div class="top-tag" onclick="loadNewData()">
			<div class="top-tag-content">
				<div class="">
					<img class="item-temp-img" src="../../image/icon_course_comment.png">
					<p class="item-p">
						评论（<span id="comment_num">0</span>）
					</p>
				</div>
			</div>
		</div>
		<ul id="comment_list" class="mui-table-view comment-list">
			<!-- <li class="mui-table-view-cell">
			 	<div class="answer-div">
					<img class="touxiang" src="../../image/default_user_icon.png" alt="">
	    			<div class="nameLabel">提问人</div>
	    			<div class="contentDiv">提问内容</div>
	    			<span class="timeSpan">2018-04-14 10:00</span>
				</div>
			</li>
			<li class="mui-table-view-cell">
			 	<div class="answer-div">
					<img class="touxiang" src="../../image/default_user_icon.png" alt="">
	    			<div class="nameLabel">提问人</div>
	    			<div class="contentDiv">提问内容</div>
	    			<span class="timeSpan">2018-04-14 10:00</span>
				</div>
			</li> -->
		</ul>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无评论
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="loadNewData()">
				重新加载
			</button>
		</div>
		<div class="bottom-div mui-table-view" onclick="onCommentClick()">
		<div class="bottom-div-content">
			<img class="bottom-div-icon" src="../../image/icon_bottom_edit.png">
			<span class="bottom-div-title">
				我也说一句
			</span>
		</div>
	</div>
	<div class="bottom-blank-div"></div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/aui-slide.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript">
		var currentIndex = 0;
		var currenImageArr = new Array();
		var currentId = null;
		var page = 1;
		var rows = 5;
		var currentCommentArr = new Array();
		var refreshCount = 0;
		var imageDataArr = new Array();
		apiready = function() {
			loadImgData();
			// setRefreshHeader();
			setPullUpRefresh();
			setupNotifi();
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'refreshSpontaneousMonmentsCommentNotifi'
			}, function(ret, err) {
			    loadNewData();
			});
		}
		function loadNewData(){
			page = 1;
			loadCommentDetail(0);
		}
		function loadMoreData(){
			page++;
			loadCommentDetail(0);
		}
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				loadNewData();
			});
		}

		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				if (refreshCount >= rows) {
					loadMoreData();
				}
			});
		}
		function loadImgData(){
			var onDayData = api.pageParam.onDayData;
			var params = {
				planid: api.pageParam.pid,
				jid: $api.getStorage('cfnetppjxid'),
				courseid: api.pageParam.cid,
				page: 1,
				rows: onDayData.imgNum,
				time: onDayData.time
			};
			cfnetppPOST(url_getOneDaySpontaneousMomentsPics, params, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						var imgArr = data.data;
						if (imgArr != null && imgArr.constructor == Array) {
							var index = api.pageParam.indexS;
							imgArr = newArrWithOldArr(imgArr, index);
							imageDataArr = imgArr;
							setupPicListView(imgArr);
							loadCurrentPhotoData(imgArr[0]);
						}
					}
				}else{

				}
			});
		}
		function newArrWithOldArr(oldArr, index){//用于调整数组内容顺序
			var arr1 = oldArr.slice(0, index);
			var arr2 = oldArr.slice(index);
			var newArr = arr2.concat(arr1);
			return newArr;
		}
		function loadCurrentPhotoData(photoData){
			loadImgDetail(photoData);
			currentId = photoData.id;
			page = 1;
			loadCommentDetail(1);
		}
		function loadCommentDetail(type){
			if (currentId == null) {
				return;
			}
			var params = {
				id : currentId,
				page : page,
				rows : rows
			};
			// console.log(url_loadSpontaneousmonmentsCommentList+'\n'+JSON.stringify(params));
			cfnetppPOST(url_loadSpontaneousmonmentsCommentList, params, true, function(data, status){
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					if (data.code == 200) {
						if (type == 1 || page == 1) {
							currentCommentArr = new Array();
							$('#comment_list').html('');
						}
						var commentArr = data.data.commentArr;
						refreshCount = commentArr.length;
						if (commentArr != null && commentArr.constructor == Array && commentArr.length > 0) {
							$('#noData').hide();
							$('#noNet').hide();
							var count = currentCommentArr.length;
							currentCommentArr = currentCommentArr.concat(commentArr);
							var htmlString = '';
							for (var i = count; i < currentCommentArr.length; i++) {
								var commentData = currentCommentArr[i];
								htmlString += commentHtmlString(commentData);
							}
							if (page == 1) {
								$('#comment_list').html(htmlString);
							}else{
								$('#comment_list').append(htmlString);
							}
						}else{
							if (page == 1) {
								$('#noData').show();
								$('#noNet').hide();
								$('#comment_list').html('');
							}
						}
						var commentNum = data.data.num;
						$('#comment_num').text(nullNum(commentNum));
					}else{
						if (page == 1) {
							$('#noData').show();
							$('#noNet').hide();
							$('#comment_list').html('');
						}
					}
				}else{
					if (page == 1) {
						$('#noData').hide();
						$('#noNet').show();
						$('#comment_list').html('');
					}
				}
			});
		}
		function commentHtmlString(commentData){
			return '<li class="mui-table-view-cell">'+
				 	'<div class="answer-div">'+
						'<img class="touxiang" src="'+commentData.picurl+'" alt="">'+
		    			'<div class="nameLabel">'+commentData.rename+'</div>'+
		    			'<div class="contentDiv">'+commentData.content+'</div>'+
		    			'<span class="timeSpan">'+timeWithStamp3(commentData.time)+'</span>'+
					'</div>'+
				'</li>';
		}
		function loadImgDetail(imgData){
			var params = {
				id : imgData.id
			};
			cfnetppPOST(url_loadSpontaneousMonmentsDetail, params, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						setupPicDetail(data.data[0]);
					}
				}
			});
		}
		function setupPicDetail(imgDetail){
			$('#user_name').text(nullString(imgDetail.rename));
			$('#class_name').text(nullString(imgDetail.title));
			$('#submit_time').text(nullTime(imgDetail.instime));
			$('#shooting_time').text(nullTime(imgDetail.ctime));
			$('#photo_name').text(fileNameWithPath(imgDetail.names));
			$('#comment_num').text(nullNum(imgDetail.count));
		}
		function nullNum(numString){
			if (numString == null) {
				return 0;
			}
			return numString;
		}
		function fileNameWithPath(path){
			var urlArr = path.split("/");//截取路径
 			var getName = urlArr[urlArr.length - 1]; //获取文件的名字 
 			return getName;
		}
		function nullString(str){
			if (str == null) {
				return '--';
			}
			return str;
		}
		function nullTime(timeString){
			if (timeString == null) {
				return '--';
			}else{
				return timeWithStamp3(timeString.toString());
			}
		}
		function setupPicListView(imgArr){
			var htmlString = '';
			for (var i = 0; i < imgArr.length; i++) {
				var imgData = imgArr[i];
				currenImageArr.push(imgData.imgurl);
				htmlString += htmlStringWithData(imgData, i);
			}
			$('#pic_list_view').html(htmlString);
			setupImagesUI();
			addImageClick();
		}
		function addImageClick(){
			$('.img-cell').unbind('click');
			$('.img-cell').click(function(){
				var index = parseInt($(this).attr('index'));
				currentIndex = index;
				openImages();
			})
		}
		function openImages(){
			var imageBrowser = api.require('imageBrowser');
			imageBrowser.openImages({
			    imageUrls: currenImageArr,
			    showList: false,
			    activeIndex: currentIndex
			});
		}
		function htmlStringWithData(data, index){
			return '<div index="'+index+'" class="img-cell aui-slide-node bg-dark" style="background-image: url('+data.imgurl+');">'+
			            // '<img src="'+data.imgurl+'" />'+
			        '</div>';
		}
		function onCommentClick(){
			if (currentId == null) {
				return;
			}
			var pageParam = api.pageParam;
			pageParam["id"] = currentId;
			api.openFrame({
			    name: 'SpontaneousMonmentsSubmitComment',
			    url: 'SpontaneousMonmentsSubmitComment.html',
			    pageParam: pageParam,
			    bounces: false
			});
			api.setFrameAttr({
			    name: 'SpontaneousMonmentsSubmitComment',
			    hidden: false
			});
		}
		function setupImagesUI(){
			var height = api.winWidth * 0.6;
			var slide3 = new auiSlide({
	        	container:document.getElementById("aui-slide"),
		        // "width":300,
		        "height":height,
		        "speed":500,
		        "autoPlay": 0, //自动播放
		        "loop":true,
		        "pageShow":true,
		        "pageStyle":'dot',
		        'dotPosition':'center',
		        currentPage:currentFun
		    });
		}
	    function currentFun(index) {
	        var count = imageDataArr.length;
	        index = index % count;
	        currentIndex = index;
	        var photoData = imageDataArr[index];
	        loadCurrentPhotoData(photoData);
	    }
	</script>
</html>